<template>
  <div>
    <el-divider direction="horizontal" content-position="center"
      >联动设置</el-divider
    >

    <el-form-item label="是否启用API" size="normal" label-width="120">
      <el-switch
        v-model="needApi"
        :active-value="true"
        :inactive-value="false"
        @change="changeDataType"
      >
      </el-switch>
      <el-input
        v-if="needApi"
        v-model="activeData.__config__.url"
        :title="activeData.__config__.url"
        placeholder="请输入接口地址"
        clearable
      >
        <el-select
          slot="prepend"
          v-model="activeData.__config__.method"
          :style="{ width: '85px' }"
          @change="$emit('fetch-data', activeData)"
        >
          <el-option label="get" value="get" />
          <el-option label="post" value="post" />
          <el-option label="put" value="put" />
          <el-option label="delete" value="delete" />
        </el-select>
      </el-input>
    </el-form-item>

    <el-form-item label="数据提供">
      <el-button
        icon="el-icon-circle-plus-outline"
        type="text"
        @click="provider.push('')"
        >添加提供数据的组件
      </el-button>
    </el-form-item>
    <div v-for="(key, idx) in provider" :key="key" class="consumer-box">
      <el-select
        placeholder="请选择提供数据的组件"
        :value="key"
        size="small"
        style="width: 50%"
        @change="(val) => onProviderChange(val, idx)"
      >
        <el-option
          v-for="child in children"
          :key="child.__config__.renderKey"
          :label="child.__config__.label || child.__config__.componentName"
          :value="child.__config__.renderKey"
          :disabled="
            provider.includes(child.__config__.renderKey) ||
            consumer.includes(child.__config__.renderKey)
          "
        ></el-option>
      </el-select>
      <el-input
        placeholder="请输入参数键名"
        class="close-btn"
        size="small"
        v-model="currApiParamKeys[key]"
        style="width: 50%"
        @change="(val) => setProviderParamKey(key, val)"
      />
      <div class="close-btn select-line-icon" @click="removeProvider(idx)">
        <i class="el-icon-remove-outline" />
      </div>
    </div>
    <el-divider direction="horizontal"></el-divider>
    <el-form-item label="数据消费">
      <el-button
        icon="el-icon-circle-plus-outline"
        type="text"
        @click="consumer.push('')"
        >添加数据消费组件
      </el-button>
    </el-form-item>
    <div v-for="(key, idx) in consumer" :key="key" class="consumer-box">
      <el-select
        placeholder="请选择消费数据的组件"
        :value="key"
        size="small"
        style="width: 50%"
        @change="(val) => onConsumerChange(val, idx)"
      >
        <el-option
          v-for="child in children"
          :key="child.__config__.renderKey"
          :label="child.__config__.label || child.__config__.componentName"
          :value="child.__config__.renderKey"
          :disabled="
            provider.includes(child.__config__.renderKey) ||
            consumer.includes(child.__config__.renderKey)
          "
        ></el-option>
      </el-select>
      <el-input
        :placeholder="needApi ? '请输入接口数据的键值路径' : `请输入参数键名`"
        class="close-btn"
        size="small"
        v-model="currConsumer[key]"
        style="width: 50%"
        @change="(val) => setConsumerUsedData(key, val)"
      />
      <div class="close-btn select-line-icon" @click="removeConsumer(idx)">
        <i class="el-icon-remove-outline" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UnLinkageSetter",
  props: {
    activeData: Object,
  },
  data() {
    // 缓存操作的数据
    return {
      provider: this.activeData.__config__.provider || [],
      consumer: this.activeData.__config__.consumer || [],
      needApi: this.activeData.__config__.dataType === "dynamic",
      // 当前选中的消费数据的组件
      currConsumer: {},
      // 当前选中的数据提供组件，在 API 模式下的参数键值
      currApiParamKeys: {},
    };
  },
  computed: {
    children() {
      return this.activeData.__config__.children || [];
    },
    consumerConfig() {
      return this.children.filter(({ __config__ }) =>
        this.consumer.includes(__config__.renderKey)
      );
    },
  },
  created() {
    // 设置初始数据
    this.init(this.activeData);
  },
  watch: {
    children(val) {
      this.setCurr(val);
    },
    "activeData.__config__.renderKey": {
      handler(val, oldVal) {
        // 当前在切换不同的用户选择组件，需要重置选项
        if (val !== oldVal) {
          this.init(this.activeData);
        }
      },
    },
  },
  methods: {
    init(activeData) {
      const { provider, consumer, dataType, children } = activeData.__config__;
      this.provider = provider;
      this.consumer = consumer;
      this.needApi = dataType === "dynamic";
      this.setCurr(children);
    },
    setCurr(children) {
      const currConsumer = {};
      const currApiParamKeys = {};
      children.forEach(
        ({ __config__: { renderKey, providerDataKey, providerParamKey } }) => {
          currConsumer[renderKey] = providerDataKey || "value";
          currApiParamKeys[renderKey] = providerParamKey;
        }
      );
      this.currConsumer = currConsumer;
      this.currApiParamKeys = currApiParamKeys;
    },
    onProviderChange(val, idx) {
      this.$set(this.activeData.__config__.provider, idx, val);
    },
    onConsumerChange(val, idx) {
      this.$set(this.activeData.__config__.consumer, idx, val);
    },
    setConsumerUsedData(key, val) {
      if (key) {
        this.currConsumer[key] = val;
        const child = this.children.find(
          ({ __config__ }) => __config__.renderKey == key
        );
        this.$set(child.__config__, "providerDataKey", val);
      }
    },
    removeConsumer(idx) {
      this.consumer.splice(idx, 1);
    },
    changeDataType(val) {
      this.$set(
        this.activeData.__config__,
        "dataType",
        val ? "dynamic" : "static"
      );
    },
    // 设置数据提供者的参数键名
    setProviderParamKey(key, val) {
      if (key) {
        this.currApiParamKeys[key] = val;
        const child = this.children.find(
          ({ __config__ }) => __config__.renderKey == key
        );
        this.$set(child.__config__, "providerParamKey", val);
      }
    },
    removeProvider(idx) {
      this.provider.splice(idx, 1);
    },
  },
};
</script>

<style scoped>
.consumer-box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.close-btn {
  cursor: pointer;
  color: #f56c6c;
  display: inline-block;
}
</style>
